<template>
  <section class="todoapp">
    <hm-header @add="add"></hm-header>
    <hm-main :list="newlist" @dagou="dagou" @del="del" @qx="qx"></hm-main>
    <hm-footer :list="list" @qc="qc" :zt="zt" @gzt="gzt"></hm-footer>
    
  </section>
</template>

<script>
const obj={
  '#/':'all',
  '#/active':'jx',
  '#/completed':'wc'
}
import HmHeader from './components/hm-header.vue'
import HmMain from './components/hm-main.vue'
import HmFooter from './components/hm-footer.vue'
export default {
  computed:{
    newlist(){
       if(this.zt==='all'){
        return this.list
       }else if(this.zt==='wc'){
        return this.list.filter(item=>item.done===true)
       }else{
        return this.list.filter(item=>item.done===false)
       }
    },
  },
  methods:{
    gzt(e){
       this.zt=e
    },
    add(e){
      this.list.push(e)
    },
    qx(e){
       this.list= this.list.map(item=>{
        item.done=e
        return item
        })
    },
    dagou(id){
        const obj= this.list.find(item=>item.id === id) 
        obj.done=!obj.done
    },
    del(id){
        const index= this.list.findIndex(item=>item.id === id)
        this.list.splice(index,1)
    },
    qc(){
      this.list= this.list.filter(item=>item.done===false)
    }
  },
  data(){
    return {
      zt: obj[location.hash]||'all',
      list: JSON.parse(window.localStorage.getItem('value')) || [],
    }
  },
  watch:{
    list:{
      deep:true,
       handler(val){
        localStorage.setItem('value',JSON.stringify(val))
    }
  },
  },
  components: {
    HmHeader,
    HmMain,
    HmFooter
  }
}
</script>

<style></style>
